<template>
  <div class="hm-register">
    <van-nav-bar title="面经注册" />

    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="username"
        label="用户名"
        placeholder="用户名"
        :rules="[
          { required: true, message: '请填写用户名' },
          { pattern: /^.{6,}$/, message: '长度必须5个字符以上' }
        ]"
      />
      <van-field
        v-model="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[
          { required: true, message: '请填写密码' },
          { pattern: /\d{6}/, message: '长度必须6个字符以上' }
        ]"
      />

      <div style="margin: 16px">
        <van-button block type="primary" native-type="submit">注册</van-button>
      </div>
    </van-form>
    <div class="footer">
      <router-link to="/login">有账号，去登录</router-link>
    </div>
  </div>
</template>
<script>
import instance from '@/utils/request'
import { Toast } from 'vant'

export default {
  components: {},
  props: {},
  data() {
    return {
      username: '',
      password: ''
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    async onSubmit() {
      try {
        const res = await instance({
          url: '/h5/user/register',
          method: 'post',
          headers: { 'Content-Type': 'application/json' },
          data: {
            username: this.username,
            password: this.password
          }
        })
        if (res.data.code === 10000) {
          Toast.success('注册成功')
        }
      } catch (error) {
        Toast.fail('用户名已被占用')
      }
    }
  }
}
</script>
<style lang="less" scoped>
.hm-register {
  width: 100%;
  height: 100%;
  // a 是行内标签 加display: block变成块级 在操作内部文本
  // flex 是设置在父元素上 操作子元素的分布
  .footer {
    display: flex;
    justify-content: end;
    a {
      padding-right: 20px;
      font-size: 12px;
    }
  }
}
</style>
